<%--
  Created by IntelliJ IDEA.
  User: 19000
  Date: 2022/8/22
  Time: 9:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            background-image: url("images/bg.jpg");
            padding-top: 25px;
        }

        .re_div {
            border: 8px solid #EEEEEE;
            width: 900px;
            height: 500px;
            background-color: white;
            margin: auto;
        }

        .cLeft {
            float: left;
            margin: 15px;
        }

        #p1 {
            color: #FFD026;
            font-size: 20px;
        }

        #p2 {
            color: #A6A6A6;
            font-size: 20px;
        }

        .cCenter {
            float: left;
        }

        .td_left {
            width: 100px;
            height: 50px;
            text-align: right;
            color: #A6A6A6;
        }

        .td_right {
            padding-left: 50px;
            color: #A6A6A6;
        }

        #username, #password, #email, #name, #emailCode {
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*    设置边框圆角*/
            border-radius: 10px;
            padding-left: 10px;
        }

        a {
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*    设置边框圆角*/
            border-radius: 10px;
            padding-left: 10px;
        }

        #emailCode {
            width: 110px;
        }

        #btn_sub {
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }

        .cRight {
            font-size: 15px;
            margin: 15px;
            float: right;
        }

        .cRight p a {
            color: pink;
        }

    </style>
</head>
<body>
<div class="re_div">
    <div class="cLeft">
        <p id="p1">新用户注册</p>
        <p id="p2">USER REGISTER</p>
    </div>
    <div class="cCenter">
        <span style="color: red; display: none; ">&nbsp;&nbsp;${msg}</span>
        <form action="${pageContext.request.contextPath}/user/register" method="post">
            <br> <br>
            <table>
                <tr>
                    <td class="td_left"><label for="username">用户名</label></td>
                    <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    <td><span id="username_err" style="color: red; display: none; ">&nbsp;&nbsp;用户名已重复</span></td>

                </tr>

                <tr>
                    <td class="td_left"><label for="password">密码</label></td>
                    <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                </tr>


                <tr>
                    <td class="td_left"><label for="name">姓名</label></td>
                    <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                </tr>


                <tr>
                    <td class="td_left">
                        <label>性别</label>
                    </td>
                    <td class="td_right">
                        <input type="radio" name="gender" value="男"> 男
                        <input type="radio" name="gender" value="女"> 女
                    </td>

                </tr>

                <tr>
                    <td class="td_left">
                        <label>Email</label>
                    </td>
                    <td class="td_right"><input name="email" id="email" placeholder="请输入邮箱"/></td>

                </tr>

                <tr>
                    <td class="td_left"><label for="emailCode">邮箱验证码</label></td>

                    <td class="td_right">
                        <input type="text" name="emailCode" id="emailCode" placeholder="请输入验证码"/>
                    </td>

                    <td>
                        <%--点击按钮执行发送验证码的操作--%>
                        <input id="sendBtn" type="button" value="点击发送验证码">
                    </td>

                    <td>
                        <span id="emailCode_err" style="color: red; display: none; ">&nbsp;&nbsp;验证码错误</span>
                    </td>

                    <td>
                        <span id="emailCode_success" style="color: green; display: none; ">&nbsp;&nbsp;成功发送验证码</span>
                    </td>

                </tr>


                <tr>
                    <td colspan="2" align="center"><input id="btn_sub" type="submit" value="注册"></td>
                </tr>

            </table>

        </form>

    </div>

    <div class="cRight">
        <p id="p3">已有账号？<a href="login.jsp">立即登录</a></p>
    </div>
</div>


<script>

    /**
     * 异步刷新，发送产生邮箱验证码的请求
     */
    document.getElementById("sendBtn").onclick = function () {
        // 发送ajax请求
        // 获取输入框的邮箱
        var email = document.getElementById("email").value;
        // alert("email是：" + email)

        // 1、创建按核心对象
        var xhp;
        if (window.XMLHttpRequest) {
            xhp = new XMLHttpRequest();
        } else {
            xhp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2、发送请求
        xhp.open("POST", "${pageContext.request.contextPath}/user/sendEmailCode?email=" + email, true);
        xhp.send();

        // 3、获取响应
        xhp.onreadystatechange = function () {
            // 发送成功
            /* if (this.responseText == "true") {
                document.getElementById("emailCode_success").style.display = '';
            }*/
            document.getElementById("emailCode_success").style.display = '';
        }
    }


    /**
     * 给用户名输入框绑定失去焦点事件
     */
    document.getElementById("username").onblur = function () {
        // 发送ajax请求
        // 获取用户名的值
        var username = this.value;

        // 1、创建按核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2、发送请求
        xhttp.open("GET", "${pageContext.request.contextPath}/user/checkUsernameRepeat?username=" + username);
        xhttp.send();

        // 3、获取响应
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                // alert("进来了")
                // 响应，判断是true还是false
                if (this.responseText == "true") {
                    // alert("存在")
                    // 用户名存在，显示提示信息
                    document.getElementById("username_err").style.display = '';
                } else {
                    // alert("不存在")
                    // 用户名不存在，清除提示信息
                    document.getElementById("username_err").style.display = 'none';
                }

            }
        }
    }


</script>

</body>
</html>

